<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">

    function FancyBorder(props) {
        return (
            <div className={'FancyBorder FancyBorder-' + props.color}>
                <p>{props.color}</p>
                {props.children}
            </div>
        );
    }

    ReactDOM.render(
            <FancyBorder color="blue">
                <div>123456</div>
            </FancyBorder>,
            document.getElementById('example')
    );


</script>
</body>
</html>